<template>
  <view>
    <action-bar :options="navOptions"></action-bar>
    <view class="unit_box">
      <view class="unit_box-box" @click="navTo('write1')">
        <view class="unit_box-box-left">
          <view class="unit_box-box-left-border"></view>
          <view class="unit_box-box-left-span">
            现场待执业
          </view>
        </view>
        <view class="unit_box-box-right">
          <view class="unit_box-box-right-span">
            待办数量：{{ total1 || 0 }}
          </view>
          <view class="cuIcon-right"></view>
        </view>
      </view>
      <view class="unit_box-box" @click="navTo('write2')">
        <view class="unit_box-box-left">
          <view class="unit_box-box-left-border"></view>
          <view class="unit_box-box-left-span">
            现场已执业
          </view>
        </view>
        <view class="unit_box-box-right">
          <view class="unit_box-box-right-span">
            已办数量：{{ total2 || 0 }}
          </view>
          <view class="cuIcon-right"></view>
        </view>
      </view>
      <view class="unit_box-box" @click="navTo('look')">
        <view class="unit_box-box-left">
          <view class="unit_box-box-left-border"></view>
          <view class="unit_box-box-left-span">
            执业已过期
          </view>
        </view>
        <view class="unit_box-box-right">
          <view class="unit_box-box-right-span">
            过期数量：{{ total3 || 0 }}
          </view>
          <view class="cuIcon-right"></view>
        </view>
      </view>
      <view class="unit_box-box" v-if="judgmentRole('engineer')" @click="navTo('write3')">
        <view class="unit_box-box-left">
          <view class="unit_box-box-left-border"></view>
          <view class="unit_box-box-left-span">
            执业待确认
          </view>
        </view>
        <view class="unit_box-box-right">
          <view class="unit_box-box-right-span">
            待确认数量：{{ total4 || 0 }}
          </view>
          <view class="cuIcon-right"></view>
        </view>
      </view>

      <view style="color: red; padding: 10rpx 24rpx">
        温馨提示：
        <view style="text-indent: 2em; margin-top: 10rpx">执业人员和项目负责人需在计划时间内完成任务，过期则不能执业和确认任务。</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navOptions: {
        statusBar: 'dark',
        left: {
          icon: 'back',
        },
        center: {
          title: "单位任务",
        },
      },
      total1: 0,// 待办数量
      total2: 0,// 已办数量
      total3: 0,// 已过期数量
      total4: 0,// 待确认数量

    }
  },
  mounted() {
    // 判断是否查询技术服务机构列表
    let key = this.judgmentRole('engineer')
    // if (key) this.getServerList();
  },
  onShow() {
    this.getWaiteList()
    this.getAlreadyList()
    this.getOverList()
    this.getUnConfirmList()
  },
  methods: {
    // 跳转至现场执业待办
    navTo(key) {
      // key的值为write时代表可以进行修改操作，而为look时代表只能进行查看操作
      this.$store.commit('changePracticeState', key)
      uni.navigateTo({
        url: '../../pages_workTableChild/manage/TaskList?operation=' + key
      })
    },
    // 获取信息列表
    getWaiteList() {
      let data = {
        system: 'app',
        //   taskState: '1,2,3',
        //   isConfirm: '0',
        //   isExpire: '0'
      }
      this.$store.dispatch('getUnitList', data).then(res => {
        if (res.code === 200) {
          this.total1 = res.data.total
        }
      })
    },
    getAlreadyList() {
      let data = {
        system: 'app',
        //   taskState: '3',
        //   isConfirm: '1',
        //   isExpire: '0'
      }
      this.$store.dispatch('getDoneTask', data).then(res => {
        if (res.code === 200) {
          this.total2 = res.data.total
        }
      })
    },
    getOverList() {
      let data = {
        system: 'app',
        // isExpire: '1'
      }
      this.$store.dispatch('getExpireTask', data).then(res => {
        if (res.code === 200) {
          this.total3 = res.data.total
        }
      })
    },
    getUnConfirmList() {
      let data = {
        system: 'app',
        // isExpire: '1'
      }
      this.$store.dispatch('getUnConfirm', data).then(res => {
        if (res.code === 200) {
          this.total4 = res.data.total
        }
      })
    },
    // 判断搜索条件【项目负责人待确认列表】是否展示
    judgmentRole(key) {
      let role = this.$store.state.login.userInfo
      let index = role.roles.includes(key)
      if (index) return true;
      else return false;
    },
  },
  beforeDestroy() {
    this.$store.commit('changePracticeState', 'look')
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.unit_box {
  width: 100%;
  background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;
  height: calc(100vh - 80rpx);
  display: flex;
  justify-content: flex-start;
  flex-direction: column;

  &-box {
    width: 702rpx;
    height: 88rpx;
    margin: 10rpx auto 8rpx;
    background: #ffffff;
    border-radius: 20rpx;
    line-height: 88rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    &-left {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      align-items: center;

      &-border {
        width: 8rpx;
        height: 36rpx;
        background: $OVERALL_SITUATION_BACKGROUND;
        border-radius: 0 6rpx 8rpx 0;
      }

      &-span {
        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin-left: 23rpx;
      }
    }

    &-right {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-right: 20rpx;

      &-span {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        margin-right: 30rpx;
        color: #666666;
      }
    }
  }
}
</style>
